<template>
	<div class="download_container">
    <Header></Header>
    <router-view></router-view>
    <div class="container-fluid misc">
      <div class="row">
        <div class="container top-part">
          <div class="top-logo">
            <img class="logo" src="//cdn2.jianshu.io/assets/web/misc-logo-805143ddec2e594416e891df316a73a7.png" alt="Misc logo">
            <div class="info">
              <div class="title">创作你的创作</div>
              <div class="slogan">一个优质创作社区</div>
            </div>
          </div>
          <img class="background-img" src="//cdn2.jianshu.io/assets/web/misc-background-2bd0f42d30ede727ef60751e6572e740.png" alt="Misc background">
          <img class="phone-img" src="//cdn2.jianshu.io/assets/web/misc-phone-7dfef21cef3585139d67481fbeb3a488.png" alt="Misc phone">
          <div class="top-qrcode">
            <img src="//cdn2.jianshu.io/assets/web/download-apps-page-top-qrcode-92108f625f507613863b730c74ebf235.png" alt="Download apps page top qrcode">
            <div class="title">扫码下载简书App</div>
            <div class="description">随时随地发现和创作内容</div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="container middle-part">
          <div class="col-xs-12 col-xs-offset-2 text-block">
            <h3>轻松创作精美图文</h3>
            <h6>简单优雅的设计，可以一次上传多张图片、实时保存、多端同步，使创作分享更方便快捷</h6>
          </div>
          <div class="col-xs-24" style="margin-top:-130px"><img class="" src="//cdn2.jianshu.io/assets/web/misc-pic1-b2e2caa2aec8ff89bd6957f09b4e6fce.png" alt="Misc pic1"></div>
        </div>
      </div>
      <div class="row">
        <div class="container middle-part">
          <div class="col-xs-11 col-xs-offset-1"><img class="" src="//cdn2.jianshu.io/assets/web/misc-pic2-378196f0f0c87fee66210c957722605c.png" alt="Misc pic2"></div>
          <div class="col-xs-11 col-xs-offset-1 text-block">
            <h3>多元化的创作社区</h3>
            <h6>一篇短文、一首诗、一幅画，在这里，你的创作将得到全世界的赞赏</h6>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="container middle-part">
          <div class="col-xs-10 col-xs-offset-2 text-block">
            <h3>百万创作者在简书相遇</h3>
            <h6>在简书，仍有数百万创作者在坚持产出优质创作，有数千万读者在用心交流创作；众多精彩创作，只在简书看得到</h6>
          </div>
          <div class="col-xs-12"><img class="" src="//cdn2.jianshu.io/assets/web/misc-pic3-a3e7f05fee99976afbb936eb6d3c288a.png" alt="Misc pic3"></div>
        </div>
      </div>
      <div class="row">
        <div class="container middle-part">
          <div class="col-xs-11 col-xs-offset-1"><img class="" src="//cdn2.jianshu.io/assets/web/misc-pic4-ed9583c5975a6d953f47c09ed63b911b.png" alt="Misc pic4"></div>
          <div class="col-xs-11 col-xs-offset-1 text-block">
            <h3>自由地交流和沟通</h3>
            <h6>你可以发表评论、沟通想法。觉得不够？还能给创作者发简信，和无数传遍中文互联网的创作者直接交流</h6>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="bottom-part">
          <img class="bottom-qrcode" src="//cdn2.jianshu.io/assets/web/download-apps-page-bottom-qrcode-8c63808111ffb1746c08cbd262adbe2e.png" alt="Download apps page bottom qrcode">
          <img class="background-img" src="//cdn2.jianshu.io/assets/web/misc-background-2bd0f42d30ede727ef60751e6572e740.png" alt="Misc background">
          <div>扫码下载简书App</div>
          <div class="bottom-logo">
            <img src="//cdn2.jianshu.io/assets/web/misc-logo-805143ddec2e594416e891df316a73a7.png" alt="Misc logo">
            <div class="info">
              <div class="title">创作你的创作</div>
              <div class="slogan">一个优质创作社区</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
</template>

<style>
  .misc .text-block {
    margin-top: 8%
  }

  .misc .background-img {
    width: 765px;
    height: 172px;
    position: absolute;
    left: 50%;
    margin-left: -380px;
    z-index: -1
  }

  .misc .top-part {
    position: relative;
    margin-top: 50px;
    text-align: center
  }

  .misc .top-part .top-logo {
    margin-bottom: 40px
  }

  .misc .top-part .top-logo .logo {
    width: 100px;
    height: 100px
  }

  .misc .top-part .top-logo .info {
    display: inline-block;
    margin-left: 20px;
    text-align: left;
    vertical-align: middle
  }

  .misc .top-part .top-logo .info .title {
    font-size: 30px
  }

  .misc .top-part .top-logo .info .slogan {
    font-size: 24px;
    font-weight: 300
  }

  .misc .top-part .background-img {
    margin-top: -100px
  }

  .misc .top-part .phone-img {
    width: 410px;
    height: 314px
  }

  .misc .top-part .top-qrcode {
    display: inline-block;
    margin: 0 0 40px 40px;
    vertical-align: bottom;
    text-align: left
  }

  .misc .top-part .top-qrcode img {
    margin-left: -2px;
    width: 140px;
    height: 140px
  }

  .misc .top-part .top-qrcode .title {
    margin-top: 4px;
    font-size: 24px
  }

  .misc .top-part .top-qrcode .description {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 300
  }

  .misc .row {
    position: relative
  }

  .misc .row:first-child:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-image: linear-gradient(0deg,hsla(0,0%,59%,.15),hsla(0,0%,59%,0))
  }

  .misc .middle-part {
    padding: 30px 0
  }

  .misc .middle-part h3 {
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 400
  }

  .misc .middle-part h6 {
    font-size: 18px;
    font-weight: 300;
    line-height: 30px
  }

  .misc .middle-part img {
    width: 100%
  }

  .misc .bottom-part {
    margin: 50px 0 80px;
    text-align: center;
    font-size: 24px
  }

  .misc .bottom-part .bottom-qrcode {
    margin-bottom: 10px;
    width: 140px
  }

  .misc .bottom-part .bottom-logo {
    margin-top: 30px
  }

  .misc .bottom-part .bottom-logo img {
    width: 56px;
    height: 56px
  }

  .misc .bottom-part .bottom-logo .info {
    display: inline-block;
    margin-left: 8px;
    text-align: left;
    vertical-align: middle
  }

  .misc .bottom-part .bottom-logo .info .title {
    font-size: 17px
  }

  .misc .bottom-part .bottom-logo .info .slogan {
    font-size: 14px;
    font-weight: 300
  }

  .misc .download-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 30px;
    border-radius: 4px;
    font-size: 17px;
    color: #fff
  }

  .misc .download-btn i {
    margin-right: 5px
  }

  .misc .download-btn.ios {
    background-color: #6dacf4
  }

  .misc .download-btn.android {
    background-color: #8bc453
  }

  .reader-night-mode .misc .middle-part {
    border-color: #2f2f2f
  }

  .reader-night-mode .misc .bottom-part .bottom-logo img,.reader-night-mode .misc .bottom-part .bottom-qrcode,.reader-night-mode .misc .middle-part img,.reader-night-mode .misc .top-part .logo,.reader-night-mode .misc .top-part .phone-img,.reader-night-mode .misc .top-part .top-qrcode img {
    opacity: .85
  }

  .reader-night-mode .misc .top-part .top-qrcode img {
    margin: 0 0 7px
  }

  /*# sourceMappingURL=entry-f0a52c2c903666aa76da.css.map*/

</style>
<script>
    import Header from "@/components/Header";
    import 'bootstrap/dist/css/bootstrap.min.css'
    export default {
        components: {Header}
    }
</script>
